<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部，公司名称 -->
      <el-card>
        <treeTools :tree-node="company" :is-root="true" />
      </el-card>
      <!-- 树形控件列表布局 -->
      <el-card>
        <el-tree
          :data="treeList"
          show-checkbox
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!--
						1、el-tree组件，源码内部，自带了一个子组件。这个子组件中有个插槽 <slot data="数据对象"> </slot>
						2、当通过el-tree，向子组件中传递内容的时候，v-slot="变量名"，通过作用域插槽即可传递。因为数据在 自带的子组件中。
						3、v-slot="scope"——————scope==={data:数据对象}
						4、v-slot="{data:数据对象}"
						5、解构scope，解构出data： v-slot="{data}"
						-->
          <template v-slot="{data}">
            <treeTools :tree-node="data" @updataList="getDepList" @addDeptsList="addDeptsList" @editDeptsList="editDeptsList" />
          </template>
        </el-tree>
      </el-card>
    </div>
    <AddDepts ref="editDept" :is-dialog-show.sync="isDialogShow" :tree-node="node" @addDepts="getDepList" />
  </div>
</template>

<script>
import treeTools from './components/tree-tools.vue'
import AddDepts from './components/add-depts.vue'

import { getDepartmentsListAPI } from '@/api/index'
import { tranListToTreeData } from '@/utils/index'

export default {
	components: {
		treeTools,
		AddDepts
	},
	data() {
	return {
		defaultProps: {
			children: 'children',
			label: 'label'
		},
		treeList: [],
		company: { name: '', manager: '' },
		isDialogShow: false, // 新增一个变量，控制添加部门弹窗的显示和隐藏
		node: {}// 声明一个变量，保存当前被点击的部门的数据
		}
	},
	created() {
		this.getDepList()
	},
	methods: {
		// 获取整个组织架构的列表数据《《《《《———————————————————————————————————
		async	getDepList() {
				const res = await getDepartmentsListAPI()
				this.company = { name: res.companyName, manager: '负责人', id: '' }
				this.treeList =	tranListToTreeData(res.depts, '')// 递归算法，将数组中的数据放到树形结构中
		},
		// 点击添加部门，显示添加部门的弹出层《《《《《———————————————————————————————————
		addDeptsList(node) {
			this.isDialogShow = true
			this.node = node
			console.log(node);
		},
		// 点击编辑部门，显示编辑部门的弹出层，并调用子组件的方法，将数据回写到弹出层中进行修改《《《《《———————————————————————————————————
		async	editDeptsList(node) {
			this.isDialogShow = true
			this.node = node
			// 点击“编辑部门”的时候，要调用子组件中的 封装的调用接口的方法。给组件起别名ref，获取组件实例（实例中有所有方法）
			this.$refs.editDept.editDepartDetail(node.id)
		}

	}
}
</script>

<style scoped>
</style>